import React, { useState, useEffect } from "react";
import { SwipeCell, Button, Cell, Toast } from "react-vant";
import { Edit } from "@react-vant/icons";
import { useNavigate } from "react-router-dom";
import axios from "axios";
import "./index.css";
import { message } from "antd";
const Index: React.FC = () => {
  const [list, setList] = useState([]);
  const navigate = useNavigate();
  useEffect(() => {
    render();
  }, []);
  const render = () => {
    axios.get("/api/word").then((resp) => {
      setList(resp.data.word);
    });
  };
  const add = () => {
    navigate("/add");
  };

  const ckbq = (v: any) => {
    navigate(`/checkthecondition/${v.word}`);
  };

  const del = (id: any) => {
    axios.delete("/api/delete", { params: { id } }).then((resp) => {
      let { code, msg } = resp.data;
      if (code == 200) {
        message.success(msg);
        render();
      }
    });
  };

  return (
    <div className="ltk">
      {list.length > 0 &&
        list.map((v: any, i: any) => (
          <SwipeCell
            rightAction={
              <Button
                style={{ height: "100%" }}
                square
                type="danger"
                onClick={() => del(v.id)}
              >
                删除
              </Button>
            }
          >
            <Cell
              title={v.word}
              label="建议:0 收藏:0"
              onClick={() => ckbq(v)}
            />
          </SwipeCell>
        ))}
      <div onClick={() => add()} className="tj">
        <Edit
          onPointerEnterCapture={undefined}
          onPointerLeaveCapture={undefined}
        />
      </div>
    </div>
  );
};
export default Index;
